import React, { Component } from "react";
import { SafeAreaView, Text, View, StyleSheet, TouchableOpacity, Image, TextInput, PermissionsAndroid, Platform, DeviceEventEmitter } from 'react-native';
import Constant from '../../utils/Constant'//全局变量
import { getImgUrl } from '../../utils/ComFunction';
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Header from "../../components/header";
import { ToastToUser } from "../../utils/CustomToast";
import ActionSheet from 'react-native-actionsheet'
import ImageCropPicker from 'react-native-image-crop-picker';
import Upload from '../../components/upload/Upload'
import { requestCameraPermission, requestWritePermission } from '../../utils/Permission';
import Loading from "../../utils/Loading";
import AndroidModule from "../../utils/AndroidConnent";
import PermissionDialog from "../../components/dialog/PermissionDialog";
const isIos = Platform.OS == 'ios';
import RegionPickerView from '../../components/Tool/RegionPickerView';

/**
 * 
 */
export default class ModifyAddressInfoPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            title: this.props.route.params.title,
            value: this.props.route.params.value,
            type: this.props.route.params.type ? this.props.route.params.type : '',//1修改发货人信息
            name: this.props.route.params.name ? this.props.route.params.name : '',
            phone: this.props.route.params.phone ? this.props.route.params.phone : '',
            address: this.props.route.params.address ? this.props.route.params.address : '',

            provinceName: this.props.route.params.merchantInfo ? this.props.route.params.merchantInfo.provinceName : '',
            cityName: this.props.route.params.merchantInfo ? this.props.route.params.merchantInfo.cityName : '',
            districtName: this.props.route.params.merchantInfo ? this.props.route.params.merchantInfo.districtName : '',
            province: this.props.route.params.merchantInfo ? this.props.route.params.merchantInfo.province : '',
            city: this.props.route.params.merchantInfo ? this.props.route.params.merchantInfo.city : '',
            district: this.props.route.params.merchantInfo ? this.props.route.params.merchantInfo.district : '',

            showAreaPicker: false,
            merchantInfo: this.props.route.params.merchantInfo ? this.props.route.params.merchantInfo : {},
        };
    }

    componentDidMount() {

    }

    render() {
        const navigation = this.props.navigation;
        return (
            <View
                style={styles.container}>
                <Header navigation={navigation} Title={this.state.title} hideSepLine={true} />

                <View style={styles.itemInputContain}>
                    <Text style={styles.itemTitleText}>联系人</Text>
                    <TextInput
                        style={styles.inputStyle}
                        value={this.state.name}
                        placeholder="请输入姓名"
                        onChangeText={(text) => this.setState({ name: text })}>

                    </TextInput>

                </View>

                <View style={styles.itemInputContain}>
                    <Text style={styles.itemTitleText}>联系电话</Text>
                    <TextInput
                        style={styles.inputStyle}
                        value={this.state.phone}
                        placeholder="请输入电话号码"
                        inputMode="tel"
                        onChangeText={(text) => this.setState({ phone: text })}>

                    </TextInput>

                </View>

                <TouchableOpacity style={styles.itemInputContain}
                    onPress={() => { this.setState({ showAreaPicker: true }) }}>
                    <Text style={styles.itemTitleText}>选择地址</Text>
                    <Text style={styles.addressText}>{this.state.provinceName + this.state.cityName + this.state.districtName}</Text>

                    <Image style={styles.arrowImg} source={require('source/image/comm/arrow_gray_icon.png')}></Image>

                </TouchableOpacity>

                <View style={styles.itemInputContain}>
                    <Text style={styles.itemTitleText}>详细地址</Text>
                    <TextInput
                        style={styles.inputStyle}
                        value={this.state.address}
                        placeholder="请输入详细地址"
                        onChangeText={(text) => this.setState({ address: text })}>

                    </TextInput>

                </View>

                <TouchableOpacity
                    style={styles.btnConfirm}
                    onPress={() => {
                        if (this.props.route.params.onConfirm) {
                            let areaObj = { 
                                provinceName: this.state.provinceName, 
                                cityName: this.state.cityName, 
                                areaName: this.state.districtName, 
                                province: this.state.province, 
                                city: this.state.city, 
                                area: this.state.district
                             };
                            this.props.route.params.onConfirm(this.state.address, this.state.name, this.state.phone,areaObj)

                            this.props.navigation.goBack()
                        }
                    }}>
                    <Text style={{ color: '#333333', fontSize: 14 }}>确认修改</Text>
                </TouchableOpacity>

                <RegionPickerView
                    show={this.state.showAreaPicker}
                    hide={() => {
                        this.setState({
                            showAreaPicker: false
                        })
                    }}
                    selectArea={(item) => {
                        this.setState({
                            showAreaPicker: false,

                            provinceName: item.provinceName,
                            cityName: item.cityName,
                            districtName: item.areaName,
                            province: item.provinceId,
                            city: item.cityId,
                            district: item.areaId
                        })

                        
                    }}
                />

            </View>
        );
    }

    

};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f9f9f9',
    },


    inputStyle: {

        width: '100%',
        backgroundColor: '#fff',
        padding: 10,
        fontSize: 14,
        color: '#333333'
    },

    btnConfirm: {
        height: 44,
        width: '100%',
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 15
    },
    itemInputContain: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 0.5,
        paddingHorizontal: 15,
        height:50
    },
    itemTitleText: {
        fontSize: 14,
        color: '#333333'
    },
    arrowImg: {
        width: 14,
        height: 14
    },
    addressText: {
        fontSize: 14,
        color: '#333333',
        flex:1,
        marginLeft:10
    }

});